<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../res/css/weui.css" />
    <link rel="stylesheet" href="../res/css/weuix.css" />
    <link rel="stylesheet" href="../res//css/common.css">
    <link rel="stylesheet" href="../res/css/swiper.css">
    <script src="../res/js/zepto.min.js"></script>
    <script src="../res/js/zepto.weui.js"></script>
    <script src="../res/js/common.js?v=1"></script>
    <script src="../res/js/swiper.js"></script>
    <script src="../res/js/socket.js"></script>
</head>
<style>
    .useList {
        width: 95%;
        padding: 5px 0;
        margin: 10px 2.5%;
        background-color: #fff;
        font-size: 15px;
        border-radius: 8px;
    }

    .useList img {
        width: 95%;
        margin: 10px 2.5%;
    }

    .useList .title {
        width: 95%;
        margin: 5px 2.5%;
        display: flex;
        background-color: #F4FAFF;
    }

    .useList .titleDiv {
        width: 95%;
        margin: 0 2.5%;
        display: flex;
        color: #353535;
        margin-bottom: 5px;
    }

    .listItem {
        flex: 1;
        text-align: center;
    }

    .useItem {
        width: 95%;
        height: 40px;
        line-height: 40px;
        padding: 5px 0;
        margin: 0 2.5%;
        border-bottom: 1px solid #E0E0E0;
        font-size: 15px;
    }

    .background {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 99;
    }

    .background img{
        position: fixed;
        width: 100%;
        height: 50%;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
    }
</style>

<body ontouchstart>
    <div class="fixed-top">
        <div class="weui-header weui-btn_primary">
            <div class="weui-header-left"><a id="btnBack" class="icon icon-109"></a></div>
            <div class="weui-header-title">检查检验报告</div>
            <div class="weui-header-right"></div>
        </div>
    </div>
    <div class="useList">
        <div class="useItem"><span style="color: #757575;font-size: 15px;">检测时间：</span> 2021-12-20 17:26:12</div>
        <div class="useItem"><span style="color: #757575;font-size: 15px;">受检者:</span> 2021-12-20 17:26:12</div>
        <div class="useItem"><span style="color: #757575;font-size: 15px;">项目:</span> 2021-12-20 17:26:12</div>
        <div class="useItem otherShow"><span style="color: #757575;font-size: 15px;">检查所见:</span> 2021-12-20 17:26:12
        </div>
        <div class="useItem otherShow"><span style="color: #757575;font-size: 15px;">诊断时间：</span> 2021-12-20 17:26:12
        </div>
    </div>
    <div class="useList imgList">
        <img src="../res/images/img_image_interrogation.png" alt="" onclick="showImg(11)">
        <img src="../res/images/img_image_interrogation.png" alt="">
    </div>
    <div class="useList usuallyReport">
        <div class="title">
            <div class="listItem">名称</div>
            <div class="listItem">结果值</div>
            <div class="listItem">参考值</div>
        </div>
        <div class="titleDiv">
            <div class="listItem">常规药敏定量 试验</div>
            <div class="listItem">大肠埃希菌</div>
            <div class="listItem">参考值下限~ 参考值上限</div>
        </div>
        <div class="titleDiv">
            <div class="listItem">常规药敏定量 试验</div>
            <div class="listItem">大肠埃希菌</div>
            <div class="listItem">参考值下限~ 参考值上限</div>
        </div>
    </div>
    <div class="useList instrumentReport">
        <div class="title">
            <div class="listItem">项目</div>
            <div class="listItem">检验方法</div>
            <div class="listItem">结果</div>
        </div>
        <div class="titleDiv">
            <div class="listItem">常规药敏定量 试验</div>
            <div class="listItem">仪器法</div>
            <div class="listItem">大肠埃希菌</div>
        </div>
    </div>
    <div class="useList drugReport">
        <div class="title">
            <div class="listItem">药敏名称</div>
            <div class="listItem">MIC值</div>
            <div class="listItem">药敏结果</div>
        </div>
        <div class="titleDiv">
            <div class="listItem">头孢曲松</div>
            <div class="listItem">＞＝64</div>
            <div class="listItem">耐药</div>
        </div>
    </div>
    <div class="background" style="display: none;" onclick="$(this).hide();"><img src="" alt="" id="showImage"></div>
</body>
<script>
    $(function () {
        //返回上页
        $('#btnBack').on("click", function () {
            history.go(-1);
        });
    })

    function showImg(){
        $("#showImage").attr('src', "../res/images/img_image_interrogation.png")
        $(".background").show()
    }
</script>

</html>